iT邦幫忙

2023 iThome 鐵人賽

DAY 24
0
Software Development

ASP.NET MVC基礎修練:從菜開始系列 第 24

Day-24 ASP.NET MVC 之 Json 讀取顯示資料

  • 分享至 

  • xImage
  •  
  1. 在 BLL 的 UsersManager.cs
    加一段程式如下
public List<Users> UsersInfo(string UserName)
        {
            return new UsersService().UsersInfo(UserName);
        }
  1. DAL 的 UsersService.cs
    加一段程式 如下
  public List<Users> UsersInfo(string UserName)
        {
            string sql = " select * from users ";
            
            sql += " where UserName like '%{0}%'";
            sql = string.Format(sql, UserName);
            SqlDataReader objReader = SQLHelper.GetReader(sql);
            List<Users> list = new List<Users>();
            while (objReader.Read())
            {
                list.Add(new Users()
                {
                    LoginId  = objReader["LoginId"].ToString(),
                    Pwd = objReader["Pwd"].ToString(),
                    UserName = objReader["UserName"].ToString()
                });
            }
            objReader.Close();
            return list;
        }
  1. 在 Scripts 的資料夾下 加一個 檔案 jquery-1.7.1.min.js
  2. 在 UsersController.cs 加上下列程式
 public ActionResult GetList(string UserName)
        {
            List<Users> UsersList = new UsersManager().UsersInfo(UserName);
            JavaScriptSerializer jss = new JavaScriptSerializer();
            string stringList = jss.Serialize(UsersList);
            return Json(stringList, JsonRequestBehavior.AllowGet);
        }

     
        [ActionName("GetAllList")]
        public ActionResult GetList()
        {
            ViewBag.UsersList = new UsersManager().UsersInfo("");
            return View("UsersManager");
        }
       
        public ActionResult list()
        {
            return View();
   }

GetList(string UserName) 程式主要說明:
public ActionResult GetList(string UserName):這是一個公開的動作方法,可以透過 HTTP 請求來存取。它接受一個名為 UserName 的字串參數。

List UsersList = new UsersManager().UsersInfo(UserName);:
透過 UsersManager 類別的 UsersInfo 方法,取得了一個 Users 型別的清單,
這個清單可能包含符合特定使用者名稱的使用者資訊。

JavaScriptSerializer jss = new JavaScriptSerializer();:JavaScriptSerializer
是用來將物件序列化為 JSON 字串,或將 JSON 字串反序列化為物件的類別。建立了一個 JavaScriptSerializer 的實例。

string stringList = jss.Serialize(UsersList);:
透過 JavaScriptSerializer,我們將 UsersList 清單物件序列化成 JSON 字串。這個 JSON 字串包含了使用者資訊的集合。

return Json(stringList, JsonRequestBehavior.AllowGet);:透過 Json 方法,將 JSON 字串包裝成一個 JsonResult,並回傳給客戶端。
JsonResult 代表包含 JSON 資料的 HTTP 回應。JsonRequestBehavior.AllowGet 表示允許客戶端使用 GET 請求取得 JSON 資料。

UsersController.cs 的 list Views
在 Views 資料夾下 加一個 list.cshtml
關鍵程式碼如下

  <script src="~/Scripts/jquery-1.7.1.min.js"></script>

    <script type="text/javascript">
        $(function () {

            $("#submitQuery").click(function () {
         
                $("#userTable tbody").empty();
                var cName = $("#UserName").val();
                $.post("/Users/GetList", { "UserName": cName }, function (data, status) {
                    var list = $.parseJSON(data);
                    for (var i = 0; i < list.length; i++) {
                        var row = "<tr>" +
                            "<td>" + list[i].LoginId + "</td>" +
                            "<td>" + list[i].UserName + "</td>" +
                            "</tr>";
                        $("#userTable tbody").append(row);
                    }
                });
            });
        });
    </script>

<body>
    <div id="container">
      
        <div id="querydiv">
            <div id="formdiv">
              
                <input type="button" id="submitQuery" value="查詢" />
            </div>
        </div>
      
        <table id="userTable"  class="bordered-table" >
            <thead>
                <tr>
                    <td><span class="blue-text">帳號</span></td>
                    <td><span class="blue-text">姓名</span></td>
                </tr>
            </thead>
        
        </table>
    </div>
</body>

jQuery 程式說明如下
$(function () { ... });:這是一個 jQuery 語法,代表當網頁(HTML 文件)載入完成後,執行其中的程式碼。這確保了在 DOM 元素都載入後再執行 JavaScript,以確保 JavaScript 可以操作 HTML 元素。

$("#submitQuery").click(function () { ... });:這一行代表選取 id 為 "submitQuery" 的 HTML 元素 然後綁定了一個 click 事件處理函式。當該按鈕被點擊時,這個函式會被執行。

$("#userTable tbody").empty();:這一行用於清空 HTML 表格(通常是 )中 元素的內容。這樣可以確保每次重新查詢時,表格中不會保留之前的資料。

var cName = $("#UserName").val();:這一行用於取得 id 為 "UserName" 的輸入框中的值,並存儲在變數 cName 中。

$.post("/Users/GetList", { "UserName": cName }, function (data, status) { ... });:這是一個使用 jQuery 的 AJAX POST 請求。
它向位於 "/Users/GetList"
這個 URL 的伺服器端控制器發送了一個 POST 請求,
並帶有一個 JSON 物件 { "UserName": cName } 作為請求的資料。
當伺服器回應時,會執行後面的函式,其中 data 參數包含伺服器回傳的 JSON 資料,status 參數包含請求的狀態。

var list = $.parseJSON(data);:
這一行用於將 JSON 格式的資料(在 data 中)解析成 JavaScript 物件,並存儲在變數 list 中。

$("#userTable tbody").append(row);:這一行用於將建立的 HTML 行(row 變數)附加到表格的 元素中,以顯示在網頁上。

執行畫面如下
https://ithelp.ithome.com.tw/upload/images/20231009/20106640crkGODuKiT.jpg

按下查詢後
https://ithelp.ithome.com.tw/upload/images/20231009/20106640kWngOTpGd5.jpg


上一篇
Day-23 ASP.NET MVC 之 SMTP 發送 Email
下一篇
Day-25 ASP.NET MVC 之 GridView
系列文
ASP.NET MVC基礎修練:從菜開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言